<template>
  <div class="box">
    <div class="leftSeach">
      <el-card>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="今天" name="1">
            <user-matcher @change="handleClinicPersonId"></user-matcher>
            <el-card class="title">今日患者 ({{ total }})</el-card>
            <div v-if="total">
              <div
                v-infinite-scroll="load"
                class="infinite-list"
                infinite-scroll-disabled="disabled"
                style="max-height: 468px; overflow: auto"
              >
                <el-card
                  v-for="(item, index) in list"
                  :key="index"
                  class="userList"
                >
                  <div class="user" @click="detailsUser(item)">
                    <div class="userLeft">
                      <avatar-image
                        style="
                          height: 54px;
                          width: 54px;
                          margin-top: -8px;
                          display: flex;
                          min-height: 54px;
                          min-width: 54px;
                        "
                        :patient="item"
                      />
                      <div class="userName">{{ item.name }}</div>
                    </div>
                    <div class="userRight">
                      <div>{{ item.reservationNumber }}</div>
                      <div>
                        {{ parseTime(item.filingTime, '{y}-{m}-{d} {h}:{i}') }}
                      </div>
                    </div>
                  </div>
                </el-card>
              </div>
              <el-card v-if="loading" style="text-align: center"
                >加载中...</el-card
              >
              <el-card v-if="noMore" style="text-align: center"
                >没有更多了</el-card
              >
            </div>
            <el-card v-else style="text-align: center"> 暂无数据 </el-card>
          </el-tab-pane>
          <el-tab-pane label="全部" name="6">
            <user-matcher @change="handleClinicPersonId"></user-matcher>
            <el-card class="title">全部患者 ({{ total }})</el-card>
            <div v-if="total">
              <div
                v-infinite-scroll="loads"
                class="infinite-list"
                infinite-scroll-disabled="disabled"
                style="max-height: 468px; overflow: auto"
              >
                <el-card
                  v-for="(item, index) in list"
                  :key="index"
                  class="userList"
                >
                  <div class="user" @click="detailsUser(item)">
                    <div class="userLeft">
                      <avatar-image
                        style="
                          height: 54px;
                          width: 54px;
                          margin-top: -8px;
                          display: flex;
                          min-height: 54px;
                          min-width: 54px;
                        "
                        :patient="item"
                      />
                      <div class="userName">{{ item.name }}</div>
                    </div>
                    <div class="userRight">
                      <div>{{ item.reservationNumber }}</div>
                      <div>
                        {{ parseTime(item.filingTime, '{y}-{m}-{d} {h}:{i}') }}
                      </div>
                    </div>
                  </div>
                </el-card>
              </div>
              <el-card v-if="loading" style="text-align: center"
                >加载中...</el-card
              >
              <el-card v-if="noMore" style="text-align: center"
                >没有更多了</el-card
              >
            </div>
            <el-card v-else style="text-align: center"> 暂无数据 </el-card>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
    <div v-if="clickUser" class="rightPanel">
      <el-card>
        <el-tabs v-model="activeNames" @tab-click="handleClicks">
          <el-tab-pane label="患者信息" name="1">
            <patient-information
              :user-message="userMessage"
              :cut="cut"
            ></patient-information>
          </el-tab-pane>
          <el-tab-pane v-if="type == '市场已到'" label="到店患者信息" name="2">
            <patient-information-pane :patient="patient" :show="false" />
          </el-tab-pane>
          <el-tab-pane v-if="type == '市场已到'" label="看诊记录" name="3">
            <seeing-record :see-record="seeRecord"></seeing-record>
          </el-tab-pane>
          <el-tab-pane v-if="type == '市场已到'" label="就诊记录" name="4">
            <treatment-record-pane :patient="patient" />
          </el-tab-pane>
          <el-tab-pane v-if="type == '市场已到'" label="收费记录" name="5">
            <charge-record-pane :patient="patient" />
          </el-tab-pane>
          <el-tab-pane label="回访记录" name="6">
            <return-visit
              :id="userMessage.id"
              :create-time="userMessage.reservationTime"
              :channel-first="userMessage.channelFirst"
            ></return-visit>
          </el-tab-pane>
          <el-tab-pane v-if="type == '市场已到'" label="TC回访记录" name="7">
            <ctreturn-visit :tc-visit="tcVisit"></ctreturn-visit>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
    <div v-if="total && model" class="rightPanel" style="min-height: 702px">
      <el-card> </el-card>
    </div>
  </div>
</template>

<script>
import PatientInformation from '@/views/userMessageHandle/components/PatientInformation'
import ReturnVisit from '@/views/userMessageHandle/components/ReturnVisit'
import CtreturnVisit from '@/views/userMessageHandle/components/CtreturnVisit'
import SeeingRecord from '@/views/userMessageHandle/components/SeeingRecord'
import UserMatcher from './UserMatcher'
import avatarImage from '@/components/yiya/avatarImage'
import { getTodayStartWithEnd } from '@/common/getDate'
import { listReservation } from '@/api/erp/reservation'
import { listPerson } from '@/api/services/person'
import { listTc } from '@/api/services/tc'
import { listAppointment } from '@/api/services/appointment'
import {
  PatientInformationPane,
  ChargeRecordPane,
  TreatmentRecordPane,
} from '@/views/components/TabsPanes'

export default {
  name: 'Demo',
  components: {
    PatientInformation,
    ReturnVisit,
    UserMatcher,
    avatarImage,
    PatientInformationPane,
    ChargeRecordPane,
    TreatmentRecordPane,
    SeeingRecord,
    CtreturnVisit,
  },
  data() {
    return {
      activeName: '1',
      activeNames: '1',
      cut: false,
      userMessage: {},
      visitList: [],
      id: '',
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        startFilingTime: undefined,
        endFilingTime: undefined,
        orderByColumn: 'filingTime',
        isAsc: 'desc',
      },
      list: [],
      total: '',
      loading: false,
      datePickerValue: getTodayStartWithEnd(),
      clickUser: false,
      model: false,
      type: '',
      patient: {},
      tcVisit: [],
      seeRecord: [],
    }
  },
  computed: {
    noMore() {
      return this.queryParams.pageSize >= this.total
    },
    disabled() {
      return this.noMore
    },
  },
  mounted() {
    this.changeDate()
    this.getList()
  },
  methods: {
    async getListAppointment() {
      const datas = await listAppointment({ clinicPersonId: this.patient.id })
      this.seeRecord = datas.rows.reverse()
    },
    async getListPerson(e) {
      const { rows } = await listPerson({
        marketReservationId: e.id,
      })
      this.patient = rows[0]
    },
    async getListTc() {
      const data = await listTc({ clinicPersonId: this.patient.id })
      this.tcVisit = data.rows
    },
    async detailsUser(e) {
      if (e.reachState === '已到店' && e.onClinicTime) {
        this.type = '市场已到'
        await this.getListPerson(e)
        await this.getListAppointment()
        await this.getListTc()
      } else {
        this.type = ''
      }
      this.clickUser = false
      setTimeout(() => {
        this.model = true
        this.userMessage = e
        this.model = false
        this.clickUser = true
      }, 200)
    },
    infiniteScroll() {
      this.loading = true
      setTimeout(() => {
        this.queryParams.pageSize += 20
        listReservation(this.queryParams).then((response) => {
          this.list = response.rows
          this.total = response.total
        })
        this.loading = false
      }, 1000)
    },
    load() {
      this.changeDate()
      this.infiniteScroll()
    },
    loads() {
      this.infiniteScroll()
    },
    changeDate() {
      this.queryParams.startFilingTime = this.parseTime(
        this.datePickerValue[0].$d,
        '{y}-{m}-{d} {h}:{i}:{s}'
      )
      this.queryParams.endFilingTime = this.parseTime(
        this.datePickerValue[1].$d,
        '{y}-{m}-{d} {h}:{i}:{s}'
      )
    },
    async getList() {
      this.loading = true
      await listReservation(this.queryParams).then((response) => {
        this.list = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    async handleClick(tab) {
      if (tab.$options.propsData.label == '今天') {
        this.changeDate()
        await this.getList()
      } else {
        this.queryParams.startFilingTime = undefined
        this.queryParams.endFilingTime = undefined
        await this.getList()
      }
    },
    handleClicks(tab) {
      switch (tab.$options.propsData.name) {
        case '2':
          this.getListPerson()
          break
        case '3':
          this.getListAppointment()
          break
        case '6':
          this.getVisitList()
          break
        case '7':
          this.getListTc()
          break
        default:
          break
      }
    },
    async handleClinicPersonId(e) {
      if (e.reachState === '已到店' && e.onClinicTime) {
        this.type = '市场已到'
        await this.getListPerson(e)
        await this.getListAppointment()
        await this.getListTc()
      } else {
        this.type = ''
      }
      this.clickUser = false
      await setTimeout(() => {
        this.userMessage = e
        this.model = true
        this.model = false
        this.clickUser = true
      }, 300)
    },
  },
}
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  .leftSeach {
    width: 25%;
    .title {
      width: 100%;
      height: 40px;
      background-color: #eee;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      color: #2d405e;
      font-weight: 700;
    }
    .infinite-list {
      height: 468px;
      padding: 0;
      margin: 0;
      list-style: none;
    }
    .userList {
      display: flex;
      flex-direction: column;
      .user {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        // height: 66px;
        // background-color: #eee;
        // border: 1px solid #ccc;
        // border-radius: 8px;
        .userLeft {
          height: 52px;
          width: 48%;
          display: flex;
          flex-wrap: nowrap;
          padding: 0 8px;
          .userName {
            display: flex;
            align-items: center;
            line-height: 54px;
            margin-left: 6px;
          }
        }
        .userRight {
          width: 52%;
          text-align: center;
          padding: 0 8px;
        }
      }
    }
  }
  .rightPanel {
    width: 74%;
  }
}
</style>
